<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta name="format-detection" content="telephone=no, email=no">
    <title>default</title>
    <link rel="stylesheet" href="./css/style.css"/>
    <!--custom style-->
    <style>
        .page {text-align:center;}
		.current .title{
            -webkit-animation: slideToTop .8s ease both;
        }

        .current .subtitle{
            -webkit-animation: slideToTop .8s 0.3s ease both;
        }
		.button {
  display: inline-block;
  width:60%;
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  text-shadow: 0px 1px 0px #86430a;
  -webkit-box-shadow: 0px 3px 8px 0px #999;
  -moz-box-shadow: 0px 3px 8px 0px #999;
  box-shadow: 0px 3px 8px 0px #999;
  color: #ffffff;
  font-size: 20px;
  background: #f07d1a;
  padding: 12px 30px 12px 30px;
  text-decoration: none;
}

.button:hover {
  color: #ffffff;
  background: #eea002;
  text-decoration: none;
}
ol>li>a {color: #bd7171;}
.page2-content, .page3-content {padding-top:40%;}
.page2-button, .page3-button {
  position: relative;
  display: inline-block;
  width:60%;
  -webkit-border-radius: 28px;
  -moz-border-radius: 28px;
  border-radius: 28px;
  box-shadow: 0px 3px 8px 0px #0890bd;
  color: #ff8300;
  font-size: 20px;
  background: #ffffff;
  padding: 12px 30px 12px 30px;
  text-decoration: none;
}
.page2-button:hover, .page3-button:hover {
  background: #dfeff5;
  text-decoration: none;
}
.page2-button>img, .page3-button>img {position: absolute;right: 8px;top: -20px;max-width: 70px;}
.page3-button {box-shadow: 0px 3px 8px 0px #1ca597;}
</style>
</head>
<body>
<div class="page-wrap">
    <div class="page" style="color: #9c5858;">
        <img src="http://pic.90sjimg.com/design/00/07/85/23/5937c34e1a17f.png" style="width:30%;margin-top:20px;">
		<h2>恭喜！设备绑定成功。</h2>
		<p style="margin-top:20px;color:#666;">更多设置在公众号菜单-快速设置中，<br/>或者点击下方快速设置</p>
		<p style="padding:20px 0;"><a id="but" class="button" href="javascript:;">快 速 设 置</a></p>
		<div style="margin:auto;margin-bottom:20px;background-color: #f1b7b7;">
<ol style="text-align:left;margin-left: 20%;color: #bd7171;padding: 15px;">
    <li><a href="">如何快速设置域名？</a></li>
    <li><a href="">如何设置P2P</a></li>
    <li><a href="">如何设置端口</a></li>
    <li><a href="">我要域名转发</a></li>
    <li><a href="">我想远程控制电脑</a></li>
    <li><a href="">我要访问异地网络</a></li>
</ol>
		</div>
		<div style="width:70%;margin:auto;background-color:#ffd9d9;padding:10px 15px;">
			<table>
				<tbody>
					<tr>
						<td width="100"><img src="./img/app.png" style="max-width:100%"></td>
						<td width="178">
							<h3 style="text-align:center;margin:0">APP下载</h3>
							<p style="text-align:center;margin:0;font-size: 12px;">使用APP应用速度可提升到上限</p>
							<p style="text-align:center;margin:0;">
								安全 无毒<br/>
								便捷 超快
							</p>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
		<div class="arrow"></div>
    </div>

    <div class="page">
        <div class="page2-content">
			<p style="padding:20px 0;"><a class="page2-button" data-type="1" href="javascript:;">我 是 新 手<img src="./img/s.png"></a></p>
			<p style="padding-top:40px;"><a class="page2-button" data-type="2" href="javascript:;">我 是 高 手</a></p>
		</div>
        <div class="arrow"></div>
    </div>
    <div class="page">
        <div class="page3-content">
			<h2 style="color: #209488;">请选择设置项</h2>
			<p style="padding:20px 0;"><a class="page3-button" data-type="1" href="javascript:;">超级直通车<img src="./img/s.png"></a></p>
			<p style="padding-top:40px;"><a class="page3-button" data-type="2" href="javascript:;">SDN</a></p>
		</div>
    </div>
</div>

<script src="./js/zepto.min.js"></script>
<script src="./js/PageSlider.js"></script>
<script>
    var p = new PageSlider({
        pages: $('.page-wrap .page')
    });
	$('#but').tap(function(){
		p.next();
	});
	$('.page2-button').tap(function(){
		$('.page2-button').find('img').remove();
		$(this).append('<img src="./img/s.png">');
		var stype = $(this).data("type");
		if(stype == 1){
			p.next();
		}else{
			alert('高手就不用下一步了，可在公众号菜单中自由设置');
		}
	});
	$('.page3-button').tap(function(){
		$('.page3-button').find('img').remove();
		$(this).append('<img src="./img/s.png">');
		var stype = $(this).data("type");
		if(stype == 1){
			
		}else{
			
		}
	});
</script>
</body>
</html>